<template>
    <div class="login-box ">
        <div class="login-box-blur">

        </div>
        <div class="login-container">
            <div class="login-caption">
                {{ appName }}
            </div>

            <el-form ref="loginFormRef"
                     v-loading="isBusy"
                     :model="loginParam"
                     :rules="loginRules">

                <div class="login-content">

                    <el-form-item prop="loginId">
                        <el-input clearable
                                  prefix-icon="UserFilled"
                                  placeholder="请输入用户账户"
                                  v-model="loginParam.loginId"/>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input show-password clearable
                                  type="password"
                                  prefix-icon="Lock"
                                  placeholder="请输入用户密码"
                                  v-model="loginParam.password"/>
                    </el-form-item>

                </div>

                <div class="login-footer">

                    <el-form-item>
                        <el-button type="primary" @click="login" class="login-btn">登 录</el-button>
                    </el-form-item>

                </div>

            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { type ComponentInternalInstance } from 'vue';
    import type { FormInstance, FormRules } from "element-plus";
    import { defaultLoginParam, type  LoginParam, loginParamRule } from "@/common/model/app_server/inputs/login_param";

    defineOptions({
        name: 'LoginView',
    })

    //region # 属性

    // 应用实例
    const { proxy }:any = getCurrentInstance() as ComponentInternalInstance

    // 应用名称
    const appName = ref('')

    // 是否繁忙
    const isBusy = ref(false)

    // 表单
    const loginFormRef = ref<FormInstance>()

    // 登录参数
    let loginParam = reactive<LoginParam>(defaultLoginParam)

    // 登录参数 验证规则
    const loginRules = reactive<FormRules<LoginParam>>(loginParamRule)

    //endregion

    //region # 方法

    // Action
    /**
     * 登录
     * */
    async function login() {
        if (!loginFormRef.value) return
        await loginFormRef.value.validate((valid, fields) => {

            if (valid) {
                // TODO 提交
                proxy.$storage.pinia.loginInfo.loginId = loginParam.loginId
                proxy.$storage.pinia.loginInfo.name = loginParam.loginId

                isBusy.value = true
                setTimeout(() => {
                    isBusy.value = false
                    proxy.$router.push('/home');
                }, 500)
            }
            else {
                // TODO 验证未通过
            }
        })
    }

    // Private

    //endregion

    //region # 事件
    onMounted(async () => {
        appName.value = proxy!.$appConfig.appName
    })
    //endregion

</script>

<style lang="less">
    @import "LoginView.less";
</style>